<template>
  <div class="order-details">
    <!-- 基本信息标题 -->
    <h3 class="blue-text">基本信息</h3>

    <!-- 等待接单框 -->
    <div class="status-box">
      <div class="status">
        <span class="status-icon"></span>
        <span>等待接单中...</span>
      </div>
      <p class="status-description">请您耐心等待，我们尽快安排师傅接单</p>
    </div>

    <!-- 预约信息框 -->
    <div class="info-box reservation-info">
      <h3 class="blue-text">预约信息</h3>
      <div class="info-item">
        <span>预约服务：</span>
        <span>修补漏水</span>
      </div>
      <div class="info-item">
        <span>预约时间：</span>
        <span>2023-02-15 09:00</span>
      </div>
      <div class="info-item">
        <span>服务地址：</span>
        <span>永安道49号安德公寓1-302</span>
      </div>
      <div class="info-item">
        <span>备注信息：</span>
        <span>水暖井管道漏水严重</span>
      </div>
      <!-- 修改预约按钮， -->
      <button class="modify-button" @click="modifyReservation">修改预约</button>
    </div>

    <!-- 订单信息框 -->
    <div class="info-box">
      <h3 class="blue-text">订单信息</h3>
      <div class="info-item">
        <span>订单编号：</span>
        <span>2787756886677666776</span>
        <!-- 复制按钮，作为超链接样式 -->
        <a class="copy-link" @click="copyOrderNumber">复制</a>
      </div>
      <div class="info-item">
        <span>下单时间：</span>
        <span>2023-02-15 09:00</span>
      </div>
    </div>

    <!-- 底部操作按钮 -->
    <div class="bottom-actions">
      <!-- 取消预约按钮，圆形 -->
      <button class="round-button cancel-button" @click="goTocancel">取消预约</button>
      <!-- 在线客服按钮，圆形，蓝色 -->
      <button class="round-button support-button" @click="goToOnlineService">在线客服</button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    modifyReservation() {
      // 处理修改预约逻辑
      console.log('修改预约');
    },
    copyOrderNumber() {
      // 处理复制订单编号逻辑
      navigator.clipboard.writeText('2787756886677666776');
      console.log('订单编号已复制');
    },
    goTocancel() {
    	// 联系客服逻辑
    	uni.navigateTo({
    		url:'/pages/index/order/cancel'
    	})
    },
    goToOnlineService() {
    	// 跳转到取消预约
    	uni.navigateTo({
    		url:'/pages/index/order/OnlinService'
    	})
    },
  }
};
</script>

<style scoped>
/* 标题蓝色字体 */
.blue-text {
  color: #007bff;
}

/* 基本信息标题 */
h4 {
  margin-bottom: 10px;
}

/* 等待接单框 */
.status-box {
  border: 1px solid #ccc;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 5px;
}

.status {
  display: flex;
  align-items: center;
}

.status-icon {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: blue;
  margin-right: 10px;
}

.status-description {
  margin-top: 10px;
  color: gray;
}

/* 预约信息框 */
.info-box {
  border: 1px solid #ccc;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 5px;
  position: relative;
}

.info-item {
  margin: 10px 0;
}

/* 修改预约按钮，圆形按钮，没有颜色 */
.modify-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: transparent;
  border: 1px solid #ccc;
  border-radius: 50%;
  padding: 5px;
  cursor: pointer;
}

.modify-button:hover {
  background-color: #f0f0f0;
}

/* 复制按钮，超链接样式 */
.copy-link {
  color: #007bff;
  cursor: pointer;
  margin-left: 10px;
}

.copy-link:hover {
  text-decoration: underline;
}

/* 底部操作按钮 */
.bottom-actions {
  display: flex;
  justify-content: flex-end;
  position: fixed;
  bottom: 20px;
  right: 20px;
}

/* 圆形按钮 */
.round-button {
  border-radius: 20px;
  border: none;
  cursor: pointer;
  margin-left: 10px;
}

/* 取消预约按钮 */
.cancel-button {
  background-color: #ccc;
}

.cancel-button:hover {
  background-color: #999;
}

/* 在线客服按钮，蓝色 */
.support-button {
  background-color: #007bff;
  color: white;
}

.support-button:hover {
  background-color: #0056b3;
}
</style>
